<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <script src="index.js"></script>
    <template id="test">
        <div class="test">
            <header>
                <h1>{{title}}</h1>
                <p>{{desc}}{{n}}</p>
            </header>
            <ul :class="title ? 'on':''">
                <li>
                    <a href="javascript:;" target="_blank" @click="linkClickEvent">
                        {{linkText}}
                    </a>
                </li>
                <li>
                    <button @click="addNumberClickEvent">add Number</button>
                </li>
            </ul>
        </div>
    </template>
    <div id="app"></div>
    <script>
        const tmpl = new Tmpl({
            elem: '#test',
            data() {
                return {
                    title: 'template Title',
                    desc: 'template Desc',
                    linkText: 'share Link',
                    n: 1
                }
            },
            methods: {
                linkClickEvent(e) {
                    console.log(e)
                },
                addNumberClickEvent(e) {
                    this.data.n += 1
                }
            },
        });
        tmpl.resolve().render('#app')

        console.log(tmpl)
    </script>
</body>

</html>